<!-- 出品部门业绩 -->
<template>
  <div class="clas_All">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-form :model="queryParams" size="small" :inline="true">
            <el-form-item prop="" style="height: 40px">
              <el-select
                v-model="byMonth.relateId"
                placeholder="请选择部门"
                clearable
                @change="deptChange"
              >
                <el-option
                  v-for="dict in deptOptions"
                  :key="dict.relateId"
                  :label="dict.label"
                  :value="dict.relateId"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="" style="height: 40px">
              <el-date-picker
                clearable
                v-model="queryParams.createdTime"
                type="month"
                placeholder="选择月"
                @change="createdTimeChange"
                :disabled="mouday"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="" style="height: 40px">
              <el-select
                v-model="queryParams.pandianCode"
                placeholder="1号至10号"
                clearable
                :disabled="mount"
              >
                <el-option
                  v-for="dict in NewDropDownList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="Gojisuan"
                >重新计算</el-button
              >
              <el-button type="primary" size="mini" @click="GetList"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-row></el-row>
      <el-row>
        <el-table :data="tableData">
          <el-table-column align="center" prop="pandianCode" label="盘点编码">
          </el-table-column>
          <el-table-column align="center" prop="deptCode" label="部门编码">
          </el-table-column>
          <el-table-column align="center" prop="deptName" label="部门">
          </el-table-column>
          <el-table-column align="center" prop="sumAmount" label="销售额/金额">
          </el-table-column>
          <el-table-column
            align="center"
            prop="standardCost"
            label="标准成本/金额"
          >
          </el-table-column>
          <el-table-column align="center" prop="RealCost" label="实际成本/金额">
          </el-table-column>
          <el-table-column align="center" label="损益">
            <el-table-column
              align="center"
              prop="proloss"
              label="金额"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="prolossRate"
              label="损益率"
            ></el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            prop="standardProMargin"
            label="标准毛利率"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="RealProMargin"
            label="实际毛利率"
          >
          </el-table-column>
        </el-table>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { deptProloss } from "@/api/system/calculate.js";
import { getPanDianCode, FindShopBom } from "@/api/system/stock";
export default {
  data() {
    return {
      AllotList: { timer: null, pandianCode: "" },
      queryParams: {
        pandianCode: "BU1010010024P20240229S4",
        shopCode: "76450932",
      },
      deptOptions: [],
      DropDownList: [],
      NewDropDownList: [],
      tableData: [],
      byMonth: {},
      mouday: true,
      mount: true,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    this.GetList();
    this.FindShop();
  },
  methods: {
    handleQuery() {},
    GetList() {
      this.queryParams.flag = 0;
      deptProloss(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
        }
      });
    },
    Gojisuan() {
      this.queryParams.flag = 1;
      deptProloss(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
        }
      });
    },
    FindShop() {
      FindShopBom().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          let ovj = res.data.filter((ite) => {
            if (ite.relateId !== null) {
              delete ite.children;
              return ite;
            }
          });
          if (ovj.length > 1) {
            this.mouday = true;
          }
          this.deptOptions = ovj;
        }
      });
    },
    createdTimeChange(v) {
      let data = new Date(v);
      let y = data.getFullYear();
      let m = data.getMonth() + 1;
      this.byMonth.pandianData = y + String(m).padStart(2, "0");
      // console.log(this.byMonth);
      getPanDianCode(this.byMonth).then((res) => {
        if (res.code == 200) {
          this.DropDownList = res.data;
          this.NewDropDownList = [];
          this.DropDownList.forEach((element) => {
            let label =
              new Date(element.startTime).getDate() +
              "号-" +
              new Date(element.endTime).getDate() +
              "号";
            this.NewDropDownList.push({
              value: element.pandianCode,
              label: label,
            });
          });
          if (res.data != []) {
            this.mount = false;
          }
        }
      });
    },
    deptChange(v) {
      // console.log(v);
      if (v) {
        this.mouday = false;
      } else {
        this.mouday = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.clas_All {
  margin: 20px;
}
</style>
